<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body,html{
  margin:0;
  padding:0;
}
</style>

<body>
  <svg width="800" height="700"></svg>
  <div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
  </div>
</div>
  <script>

    let data = [[{x: 0, y: 30}, {x: 1, y: 8}, {x: 2, y: 10}, {x: 3, y: 14}, {x: 4, y: 10}, {x: 5, y: 11}, {
        x: 6,y: 22}, {x: 7, y: 17}, {x: 12, y: 14}, {x: 14, y: 18}, {x: 20, y: 20}]
]
    let svg = d3.select("svg"),
      margin = {top :20,right:20,bottom:50,left:50},
      areaWidth = svg.attr("width") - margin.left-margin.right,
      areaHeight = svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g")
      .attr("transform",`translate(${margin.left},${margin.top})`)
      .attr("width",areaWidth)
      .attr("height",areaHeight)

     let xScale =d3.scaleLinear()
       .domain([0,22])
       .range([0,areaWidth]);

     let yScale = d3.scaleLinear()
       .domain([40,0])
       .range([0,areaHeight]) ;

     let xAxis = d3.axisBottom(xScale) ;

     let yAxis = d3.axisLeft(yScale)  ;

     let line = d3.line()
     .curve(d3.curveStepAfter)
     .x(function(d){
       return xScale(d.x)
     })
     .y(function (d) {
        return yScale(d.y)
     });

     let t =d3.transition()
          .duration(500)
          .ease(d3.easeLinear)
    let xGrooup = g.append("g")
      .attr("transform",`translate(0,${areaHeight})`)
      .call(xAxis)

    let yGroup =  g.append("g")
       .attr("transform",`translate(0,0)`)
       .call(yAxis)

       g.append("clipPath")
      .attr("id", "clip")
      .append("rect")
      .attr("width", areaWidth)
      .attr("height", areaHeight);

     let updateLine = g.append("g")
      .attr("class","chart")
      .selectAll("line")
      .data(data)

      let enterLine = updateLine.enter();
      let exitLine = updateLine.exit();

    let path =  enterLine.append("path")
      .attr("clip-path", "url(#clip)")
      .attr("class","line")
      .attr("d",line)
      .attr("fill","none")
      .attr("stroke",0)
      .transition(t)
      .attr("stroke-width",2)
      .attr("stroke","green")

      exitLine.remove();
      let zoom = d3.zoom()
          .scaleExtent([1, 8])
          .translateExtent([[0,0], [areaWidth, areaHeight]])
          .on("zoom", zoomed);


      let zoomRect = svg.append("rect")
      .attr("width",areaWidth)
      .attr("height",areaHeight)
      .attr("fill","none")
      .attr("pointer-events","all")
      .call(zoom);


    function zoomed() {
        let t = d3.event.transform.rescaleX(xScale)
        xGrooup.call(xAxis.scale(t))
        g.select("path.line").attr("d", line.x(function(d){
          return t(d.x)}))
      }



  </script>
</body>









</html>
